import { useState } from "react";
import { useAuth } from "@/context/AuthContext";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function Profile() {
  const { user } = useAuth();
  const [isEditing, setIsEditing] = useState( false);
  
  // 表单状态
  const [formData, setFormData] = useState({
    nickname: user?.nickname || "",
    email: user?.email || "",
    avatarUrl: user?.avatarUrl || "",
  });
  
  // 处理表单变化
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  // 提交表单
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: 实现更新用户信息的API调用
    console.log("更新用户信息:", formData);
    setIsEditing(false);
  };
  
  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">个人信息</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>基本信息</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit}>
                <div className="space-y-4">
                  <div className="grid gap-2">
                    <Label htmlFor="nickname">昵称</Label>
                    <Input
                      id="nickname"
                      name="nickname"
                      value={formData.nickname}
                      onChange={handleChange}
                      disabled={!isEditing}
                    />
                  </div>
                  
                  <div className="grid gap-2">
                    <Label htmlFor="email">电子邮箱</Label>
                    <Input
                      id="email"
                      name="email"
                      type="email"
                      value={formData.email}
                      onChange={handleChange}
                      disabled // 邮箱不允许修改
                    />
                  </div>
                  
                  <div className="grid gap-2">
                    <Label htmlFor="avatarUrl">头像URL</Label>
                    <Input
                      id="avatarUrl"
                      name="avatarUrl"
                      value={formData.avatarUrl}
                      onChange={handleChange}
                      disabled={!isEditing}
                      placeholder="请输入有效的图片URL"
                    />
                  </div>
                </div>
                
                {isEditing ? (
                  <div className="flex gap-2 mt-6">
                    <Button type="submit">保存</Button>
                    <Button type="button" variant="outline" onClick={() => setIsEditing(false)}>
                      取消
                    </Button>
                  </div>
                ) : (
                  <Button type="button" onClick={() => setIsEditing(true)} className="mt-6">
                    编辑信息
                  </Button>
                )}
              </form>
            </CardContent>
          </Card>
        </div>
        
        <div>
          <Card>
            <CardHeader>
              <CardTitle>用户头像</CardTitle>
            </CardHeader>
            <CardContent className="flex flex-col items-center">
              <Avatar className="h-24 w-24 mb-4">
                <AvatarImage src={user?.avatarUrl} alt={user?.nickname || "用户"} />
                <AvatarFallback>{user?.nickname?.slice(0, 2).toUpperCase() || "用户"}</AvatarFallback>
              </Avatar>
              <p className="text-center font-medium">{user?.nickname || "用户"}</p>
              <p className="text-center text-sm text-muted-foreground">{user?.email}</p>
            </CardContent>
            <CardFooter className="flex justify-center">
              <Button variant="outline" size="sm" disabled>更换头像</Button>
            </CardFooter>
          </Card>
          
          <Card className="mt-4">
            <CardHeader>
              <CardTitle>账号安全</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex flex-col gap-1">
                <p className="text-sm font-medium">修改密码</p>
                <p className="text-xs text-muted-foreground">定期更新密码可以提高账号安全性</p>
                <Button variant="outline" size="sm" className="mt-2 w-full" disabled>
                  修改密码
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
} 